<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />

		<title>长沙县卫计委数据安全解决方案</title>

		<meta name="keywords" content="数据安全解决方案,数据安全网关" />

		<meta name="description" content="专业数据安全解决方案" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />



		<!-- basic styles -->



		<link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />

		<link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.css}" />



		<!--[if IE 7]>

		<link rel="stylesheet" th:href="@{/css/font-awesome-ie7.min.css}"/>

		<![endif]-->

		<!-- gds styles -->



		<link rel="stylesheet" th:href="@{/css/gds.min.css}" />

		<link rel="stylesheet" th:href="@{/css/gds-rtl.min.css}" />



		<!--[if lte IE 8]>

		<link rel="stylesheet" th:href="@{/css/gds-ie.min.css}"/>

		<![endif]-->



		<!-- inline styles related to this page -->



		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->



		<!--[if lt IE 9]>

		<script th:src="@{/js/html5shiv.js}"></script>

		<script th:src="@{/js/respond.min.js}"></script>

		<![endif]-->
	</head>



	<body class="">
	<div class="nav-header">
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="navbar-inner-main">
					<img th:src="@{/images/logo.png}" height="39" width="90" style="margin-top:10px;margin-bottom:10px;padding-left: 30px;" class="pull-left"/>
					<span style="float: left;padding:10px 20px 10px;margin-top: 5px;text-shadow: 1px 0 1px rgba(0,0,0,0.25); margin-left: -20px; font-size: 20px; font-weight: 200; color: #ffffff;">GAFF数据安全解决方案 </span>
					<!-- /.nav-collapse -->
				</div>
			</div>
			<!-- /navbar-inner -->
		</div>
	</div>
	<div style="margin: 10vh 0 20px;"></div>

	<div class="main-container">

		<div class="main-content-fluid" style="margin-left: 5vh;margin-right: 5vh;">

			<div class="row">

				<div class="col-xs-12">

					<!-- PAGE CONTENT BEGINS -->



					<div class="hr hr-18 hr-double dotted"></div>



					<div class="row-fluid">

						<div class="span12">

							<div class="widget-box">

								<div class="widget-header widget-header-blue widget-header-flat">

									<h4 class="lighter">账号注册</h4>

								</div>



								<div class="widget-body">

									<div class="widget-main">

										<div id="fuelux-wizard" class="row-fluid" data-target="#step-container">

											<ul class="wizard-steps">

												<li data-target="#step1" class="active">

													<span class="step">1</span>

													<span class="title">厂家信息</span>

												</li>



												<li data-target="#step2">

													<span class="step">2</span>

													<span class="title">账户信息</span>

												</li>



												<li data-target="#step3">

													<span class="step">3</span>

													<span class="title">信息确认</span>

												</li>

											</ul>

										</div>



										<hr />

										<div class="step-content row-fluid position-relative" id="step-container">

											<div class="step-pane active" id="step1">

												<h3 class="lighter block green">填写厂家信息</h3>

												<form class="form-horizontal" id="company-form">

													<div class="form-group">
														<label for="c_COMPANY_NAME" class="col-xs-12 col-sm-3 control-label no-padding-right">*公司名称</label>
														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right">
																<input type="text" name="c_COMPANY_NAME" id="c_COMPANY_NAME" class="width-100" />
															</span>
														</div>
													</div>
													<div class="form-group">
														<label for="c_LINK_MAN" class="col-xs-12 col-sm-3 control-label no-padding-right">*联络人</label>
														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right">
																<input type="text" name="c_LINK_MAN" id="c_LINK_MAN"
																	   class="width-100" />
															</span>
														</div>
													</div>
													<div class="form-group">
														<label for="c_LINK_TEL" class="col-xs-12 col-sm-3 control-label no-padding-right">*手机号码</label>
														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right">
																<input type="text" name="c_LINK_TEL" id="c_LINK_TEL" class="width-100" />
															</span>
														</div>
													</div>
													<div class="form-group">
														<label for="c_COMPANY_REMARK" class="col-xs-12 col-sm-3 control-label no-padding-right">描述</label>
														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right">
																<!--<input type="text" name="c_COMPANY_REMARK" id="c_COMPANY_REMARK" class="width-100" />-->
																<textarea style="resize: none;" rows="6" class="form-control" type="text" name="c_COMPANY_REMARK" id="c_COMPANY_REMARK" placeholder="请输入描述"/>
															</span>
														</div>
													</div>
												</form>

											</div>



											<div class="step-pane" id="step2">
												<form class="form-horizontal" id="account-form">

													<div class="form-group">
														<label for="c_LOGIN_NAME" class="col-xs-12 col-sm-3 control-label no-padding-right">*登录名称</label>
														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right">
																<input type="text" name="c_LOGIN_NAME" id="c_LOGIN_NAME" class="width-100" />
															</span>
														</div>
													</div>
													<div class="form-group">
														<label for="c_USER_EMAIL" class="col-xs-12 col-sm-3 control-label no-padding-right">*邮箱</label>
														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right">
																<input type="text" name="c_USER_EMAIL" id="c_USER_EMAIL" class="width-100" />
															</span>
														</div>
													</div>
													<div class="form-group">
														<label for="c_USER_PWD" class="col-xs-12 col-sm-3 control-label no-padding-right">*密码</label>
														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right">
																<input type="password" name="c_USER_PWD" id="c_USER_PWD"
																	   class="width-100" />
															</span>
														</div>
													</div>
													<div class="form-group">
														<label for="c_RE_USER_PWD" class="col-xs-12 col-sm-3 control-label no-padding-right">*确认密码</label>
														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right">
																<input type="password" name="c_RE_USER_PWD" id="c_RE_USER_PWD" class="width-100" />
															</span>
														</div>
													</div>
												</form>

											</div>



											<div class="step-pane" id="step3">
												<div class="center">
													<div class="profile-user-info profile-user-info-striped" style="margin-left: 20vh;margin-right: 20vh;">
														<div class="profile-info-row">
															<div class="profile-info-name"> 公司名称 </div>
															<div class="profile-info-value">
																<span class="editable" id="sp_COMPANY_NAME"></span>
															</div>
														</div>
														<div class="profile-info-row">
															<div class="profile-info-name">联络人</div>
															<div class="profile-info-value">
																<span class="editable" id="sp_LINK_MAN"></span>
															</div>
														</div>
														<div class="profile-info-row">
															<div class="profile-info-name">联系电话</div>
															<div class="profile-info-value">
																<span class="editable" id="sp_LINK_TEL"></span>
															</div>
														</div>
														<div class="profile-info-row">
															<div class="profile-info-name">公司描述</div>
															<div class="profile-info-value">
																<span class="editable" id="sp_COMPANY_REMARK"></span>
															</div>
														</div>
														<br />
														<div class="profile-info-row" style="height: 60px;">
															<div class="profile-info-name" style="height: 60px;">登录名称</div>
															<div class="profile-info-value" style="height: 60px;overflow: auto;overflow-x: hidden;">
																<span class="editable" id="sp_LOGIN_NAME"></span>
															</div>
														</div>
														<div class="profile-info-row">
															<div class="profile-info-name">邮箱</div>
															<div class="profile-info-value">
																<span class="editable" id="sp_USER_EMAIL"></span>
															</div>
														</div>

													</div>
												</div>
											</div>
										</div>
										<hr />
										<div class="row-fluid wizard-actions">
											<button class="btn btn-prev">
												<i class="icon-arrow-left"></i>
												上一步

											</button>
											<button class="btn btn-success btn-next" data-last="确认并注册 ">
												下一步
												<i class="icon-arrow-right icon-on-right"></i>
											</button>
										</div>

									</div><!-- /widget-main -->

								</div><!-- /widget-body -->

							</div>

						</div>

					</div>

				</div><!-- /.col -->

			</div><!-- /.row -->

		</div>

	</div><!-- /.main-container -->

	<div style="margin: 10vh 0 20px;"></div>
	<div class="center" style="margin-bottom: 20px;">&copy;湖南格凡安信科技有限公司版权所有2017-2018</div>

	<!-- basic scripts 111-->
	<!--[if !IE]> -->
	<script th:src="@{/js/jquery/jquery-2.1.1.js}"></script>

	<!-- <![endif]-->

	<!--[if IE]>

	<script th:src="@{/js/jquery/jquery.min.js}"></script>

	<![endif]-->

	<script th:src="@{/bootstrap/js/bootstrap.js}"/>
	<script th:src="@{/js/jquery/jquery.form.js}"></script>

	<script th:src="@{/js/fuelux/fuelux.wizard.min.js}"></script>
	<script th:src="@{/js/bootbox.min.js}"></script>

	<script th:src="@{/js/gds-elements.min.js}"></script>
	<script th:src="@{/js/gds.min.js}"></script>

	<script type="text/javascript" th:src="@{/bootstrap/bootstrap-validator/js/bootstrapValidator.js}"></script>
	<!--<script type="text/javascript">
        /*if("ontouchend" in document) document.write("<script src='/static/js/jquery/jquery.mobile.custom.min.js'>");*/
	</script>-->



	<!-- inline scripts related to this page -->
	<style>
		.profile-info-row,.profile-info-name,profile-info-value {
			height: 40px;
			min-height: 40px;
		}

	</style>
	<script th:inline="javascript">
        var contextPath =[[${#httpServletRequest.getContextPath()}]];
	</script>
	<script>
        $(function(){

            (function($){
                $.fn.serializeJson=function(){
                    var serializeObj={};
                    var array=this.serializeArray();
                    var str=this.serialize();
                    $(array).each(function(){
                        if(serializeObj[this.name]){
                            if($.isArray(serializeObj[this.name])){
                                serializeObj[this.name].push(this.value);
                            }else{
                                serializeObj[this.name]=[serializeObj[this.name],this.value];
                            }
                        }else{
                            serializeObj[this.name]=this.value;
                        }
                    });
                    return serializeObj;
                };
            })(jQuery);

        });
		$(document).ready(function () {

		    var reqData = {};
            $('#fuelux-wizard').gds_wizard().on('change' , function(e, info){
                if ('step1' == $(".step-pane.active").attr("id")) {
                    return $("#company-form").data('bootstrapValidator').validate().isValid();
                } else if('step2' == $(".step-pane.active").attr("id")) {
                    return $("#account-form").data('bootstrapValidator').validate().isValid();
				}

            }).on('changed' , function(e){
				if ('step3' == $(".step-pane.active").attr("id")) {
                    reqData = $("#company-form").serializeJson();
                    $.extend(reqData,$("#account-form").serializeJson());
				    $("#sp_COMPANY_NAME").text(reqData.c_COMPANY_NAME);
				    $("#sp_LINK_MAN").text(reqData.c_LINK_MAN);
				    $("#sp_LINK_TEL").text(reqData.c_LINK_TEL);
				    $("#sp_COMPANY_REMARK").text(reqData.c_COMPANY_REMARK);
				    $("#sp_LOGIN_NAME").text(reqData.c_LOGIN_NAME);
				    $("#sp_USER_EMAIL").text(reqData.c_USER_EMAIL);
				}

            }).on('actionclicked' , function(e, info){
                alert(1)

            }).on('finished', function(e) {
                bootbox.confirm({
                    buttons: {
                        confirm: {
                            label: '确定',
                            className: 'btn-sm btn-primary'
                        },
                        cancel: {
                            label: '取消',
                            className: 'btn-sm btn-smbtn-default'
                        }
                    },
                    title :"确认",
                    message :'确认信息填写正确？',
                    size: 'small',
                    callback : function (result) {
                        if (result) {
                            $.post(contextPath + "/register",reqData, function (data) {
                                if (null != data) {
                                    if (0 == data.code) {
                                        bootbox.alert({
                                            buttons: {
                                                ok : {
                                                    lable : '确定',
                                                    "className": "btn-sm btn-success"
												}
											},
                                            message: "注册成功，请等待管理员审核!",
                                            callback: function () {
                                                window.location.href = contextPath +"/";
                                            }
                                        });
                                    } else if (500 == data.code) {
                                        bootbox.dialog({
                                            message: '<span class="bigger-110">' +data.msg+ '</span>',
                                            buttons: {
                                                "danger": {
                                                    "label": "确定",
                                                    "className": "btn-sm btn-danger"
                                                }
                                            }
                                        });
									}
                                }
                            });
                        }
                    }
                });

            }).on('stepclick', function(e){

                //return false;//prevent clicking on steps

            });
        })
	</script>
	<!-- form validator -->
	<script type="text/javascript">
        $(document).ready(function() {
            // <![CDATA[
            $('#company-form,#account-form').bootstrapValidator({
                message: 'This value is not valid',
                excluded: ':disabled',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    c_COMPANY_NAME: {
                        validators: {
                            notEmpty: {
                                message: '公司名称不能为空'
                            },
                            stringLength: {
                                min: 1,
                                max: 256,
                                message: '公司名字不能超过256个字符'
                            }
                        }
                    },
                    c_LINK_MAN: {
                        validators: {
                            notEmpty: {
                                message: '联络人不能为空'
                            },
                            stringLength: {
                                min: 1,
                                max: 256,
                                message: '联络人名字不能超过256个字符'
                            }
                        }
                    },
                    c_LINK_TEL: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: '联系电话不能为空'
                            },
                            stringLength: {
                                min: 5,
                                max: 32,
                                message: '联系电话不能少于5个数字且不能多余32个'
                            },
                            regexp: {
                                regexp: /^((1[3-9][0-9])\d{8})|((0\d{2}-\d{8}(-\d{1,4})?)|(0\d{3}-\d{7,8}(-\d{1,4})?))$/,
                                message: '不是正确的手机号码／固话号码'
                            },
                            different: {
                                field: 'c_USER_PWD',
                                message: '联系方式与密码不能相同'
                            }
                        }
                    },
                    c_COMPANY_REMARK: {
                        validators: {
                            stringLength: {
                                min: 0,
                                max: 1024,
                                message: '公司描述不能超过1024个字符'
                            }
                        }
                    },
                    c_LOGIN_NAME: {
                        validators: {
                            notEmpty: {
                                message: '登录名不能为空'
                            },
                            different: {
                                field: 'c_USER_PWD',
                                message: '登录名和密码不能相同'
                            },stringLength: {
                                min: 4,
                                max: 16,
                                message: '登录名不能小于4个字符，不能大于16个字符'
                            },regexp: {
                                regexp: /^[a-zA-Z0-9_-]{4,16}$/,
                                message: '登录名只能为英文字母、数字和"_" "-"'
                            }
                        }
                    },
                    c_USER_EMAIL: {
                        validators: {
                            notEmpty: {
                                message: '邮箱不能为空'
                            },
                            different: {
                                field: 'c_USER_PWD',
                                message: '邮箱和密码不能相同'
                            },stringLength: {
                                min: 6,
                                max: 128,
                                message: '邮箱不能小于6个字符，不能大于128个字符'
                            },regexp: {
                                regexp: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                                message: '邮箱格式不正确'
                            }
                        }
                    },
                    c_USER_PWD: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },stringLength: {
                                min: 10,
                                max: 32,
                                message: '密码为10-32位字符'
                            },regexp: {
                                regexp: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~#\^$@$!%*?&\.])[A-Za-z\d~#$\^@$!%*?&\.]{7,}$/,
                                message: '密码必须包含英文字母，数字及特殊字符（~!@#$%^&*.?）'
                            },different: {
                                field: 'c_USER_EMAIL',
                                message: '邮箱和密码不能相同'
                            }
                        }
                    },
                    c_RE_USER_PWD: {
                        validators: {
                            notEmpty: {
                                message: '确认密码不能为空'
                            },stringLength: {
                                min: 10,
                                max: 32,
                                message: '确认密码为10-32位字符'
                            },
                            identical: {
                                field: 'c_USER_PWD',
                                message: '与密码不一致'
                            }
                        }
                    }
                }
            }).on('error.form.bv', function (e) {
                console.log('error');

                // Active the panel element containing the first invalid element
                var $form = $(e.target),
                    validator = $form.data('bootstrapValidator'),
                    $invalidField = validator.getInvalidFields().eq(0),
                    $collapse = $invalidField.parents('.collapse');

                $collapse.collapse('show');
            });
            //]]>
        });
	</script>

</body>

</html>

